<template>
  <a-modal
    :width='1400'
    :visible='visible'
    :confirm-loading='loading'
    :title="isUpdate ? '修改' : '新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible='updateVisible'
    @ok='save'
  >
  <div class="ele-body ele-body-card">
    <!-- 顶部卡片 -->
    <a-card
      :bordered="true"
      :body-style="{padding: '20px'}">
      <a-form
        ref="form"
        :model="paramForm"
        :rules="rules"
        :label-col="{ md: { span: 11 }, sm: { span: 24 } }"
        :wrapper-col="{ md: { span: 13 }, sm: { span: 24 } }"
      >
        <a-row :gutter="8">
          <a-col :md="10" :sm="24" :xs="24">
            <a-form-item label='模板名称:' name='templateName'>
              <a-input v-model:value='form.templateName' allow-clear style="width: 300px;" />
            </a-form-item>
          </a-col>
          <a-col :md="1" :sm="24" :xs="24" />
          <a-col :md="4" :sm="24" :xs="24" >
            <a-form-item v-if="!isUpdate">
              <a-button type='primary' html-type='button' @click='syncSetting'>
                一键同步已有设备的配置
              </a-button>
            </a-form-item>
          </a-col>
          <a-col :md="9" :sm="24" :xs="24" />
        </a-row>
        <a-divider>总开关</a-divider>
        <a-row :gutter='8'>
          <a-col :md='12' :sm='24' :xs='24'>
            <a-form-item label='总开关' name='masterSwitch'>
              <a-switch
                checked-children='开'
                un-checked-children='关'
                autoFocus='false'
                :checked='switchform.masterSwitchCheck'
                @change='masterSwitchChange'
              />
            </a-form-item>
          </a-col>

          <a-col :md='12' :sm='24' :xs='24' />
        </a-row>

        <a-divider>告警设置</a-divider>
        <a-row>
          <a-col :md='12' :sm='24' :xs='24'>
            <a-form-item label='温度报警下限(℃):' name='tempAlarmLow'>
              <a-input v-model:value='form.tempAlarmLow' placeholder='精确到小数点后1位,范围从-50到90' allow-clear />
              <a-alert message="精确到小数点后1位,范围从-50到90" style="margin-top:5px;font-size: 11px;padding:2px 3px;" type="info" show-icon />
            </a-form-item>
            <a-form-item label='温度报警上限(℃):' name='tempAlarmHigh'>
              <a-input v-model:value='form.tempAlarmHigh' placeholder='精确到小数点后1位,范围从-50到90' allow-clear />
              <a-alert message="精确到小数点后1位,范围从-50到90" style="margin-top:5px;font-size: 11px;padding:2px 3px;" type="info" show-icon />
            </a-form-item>
            <a-form-item label='空气温度探头补偿(℃):' name='tempAlarmBuchang'>
              <a-input v-model:value='form.tempAlarmBuchang' placeholder='精确到小数点后1位,范围从-50到90' allow-clear />
              <a-alert message="精确到小数点后1位,范围从-50到90" style="margin-top:5px;font-size: 11px;padding:2px 3px;" type="info" show-icon />
            </a-form-item>
            <a-form-item label='湿度报警下限(%RH):' name='humAlarmLow'>
              <a-input v-model:value='form.humAlarmLow' placeholder='精确到小数点后1位,范围从0到100' allow-clear />
              <a-alert message="精确到小数点后1位,范围从0到100" style="margin-top:5px;font-size: 11px;padding:2px 3px;" type="info" show-icon />
            </a-form-item>
            <a-form-item label='湿度报警上限(%RH):' name='humAlarmHigh'>
              <a-input v-model:value='form.humAlarmHigh' placeholder='精确到小数点后1位,范围从0到100' allow-clear />
              <a-alert message="精确到小数点后1位,范围从0到100" style="margin-top:5px;font-size: 11px;padding:2px 3px;" type="info" show-icon />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24' :xs='24'>
            <a-form-item label='氨气探头是否开启' name='nh3Enable'>
              <a-radio-group v-model:value='form.nh3Enable'>
                <a-radio :value='0'>
                  未开启
                </a-radio>
                <a-radio :value='1'>
                  开启
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label='氨气浓度告警下限(ppm):' name='nh3AlarmLow'>
              <a-input v-model:value='form.nh3AlarmLow' placeholder='整数，范围从0到100' allow-clear />
              <a-alert message="整数，范围从0到100" style="margin-top:5px;font-size: 11px;padding:2px 3px;" type="info" show-icon />
            </a-form-item>
            <a-form-item label='氨气浓度告警上限(ppm):' name='nh3AlarmHigh'>
              <a-input v-model:value='form.nh3AlarmHigh' placeholder='整数，范围从0到100' allow-clear />
              <a-alert message="整数，范围从0到100" style="margin-top:5px;font-size: 11px;padding:2px 3px;" type="info" show-icon />
            </a-form-item>
            <a-form-item label='报警检测时长(秒):' name='checkTimes'>
              <a-input v-model:value='form.checkTimes' placeholder='范围从0到32767，单位秒' allow-clear />
              <a-alert message="范围从0到32767，单位秒" style="margin-top:5px;font-size: 11px;padding:2px 3px;" type="info" show-icon />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <DeviceSprayfanlinkcameraBatchConfigTemplateSyncsetting v-if="showSelectDevice"
                                                                           v-model:visible="showSelectDevice"
                                                                           :data="current"
                                                                           @done="synctoDevice" />
  </div>
  </a-modal>
</template>

<script>
import { message } from 'ant-design-vue';
import {DeviceSprayFanlinkcameraConfigTemplateApi} from '@/api/property/sprayfanlinkcamera/DeviceSprayFanlinkcameraConfigTemplateApi';
import DeviceSprayfanlinkcameraBatchConfigTemplateSyncsetting from './sprayfanlinkcamera-batch-config-template-syncsetting.vue'
import {DeviceSprayFanlinkcameraConfigApi} from "@/api/property/sprayfanlinkcamera/DeviceSprayFanlinkcameraConfigApi";
export default {
  name: 'DeviceSprayfanlinkcameraBatchConfigTemplateEdit',
  components: {
    DeviceSprayfanlinkcameraBatchConfigTemplateSyncsetting
  },
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object
  },
  created() {
    if (this.data) {
      this.form = Object.assign({}, this.data);
      this.switchform = {};
      this.switchform.masterSwitchCheck = (this.data.masterSwitch == 1) ? true : false;
      this.isUpdate = true;
    } else {
      this.form = {};
      this.switchform = {};
      this.isUpdate = false;
    }
  },
  data() {
    return {
      form : {},
      switchform : {},
      rules: {

      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      showSelectDevice : false,
      current : null
    };
  },
  methods: {
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    syncSetting() {
      console.log(this.form);
      this.current = this.form;
      this.showSelectDevice = true;
    },
    synctoDevice (recordId) {
      let that = this;
      DeviceSprayFanlinkcameraConfigApi.detail({"recordId" : recordId}).then(res => {
        delete res.recordId;
        delete res.updateTime;
        delete res.updateUser;
        delete res.createTime;
        delete res.createUser;
        res.templateName = that.form.templateName;
        this.form = Object.assign({}, res);
        this.switchform = {};
        this.switchform.masterSwitchCheck = (res.masterSwitch == 1) ? true : false;
      }).catch((e) => {
        console.log(e);
      });
    },

    masterSwitchChange(checked) {
      console.log(checked);
      this.switchform.masterSwitchCheck = checked;
    },    


    /**
     * 保存和编辑
     * 写到队列，队列发送完回写到原配置
     * @author cancan
     * @date 2022/03/04 21:15
     */
    save() {
      this.form.masterSwitch = this.switchform.masterSwitchCheck ? 1 : 2;

      // 修改加载框为正在加载
      this.loading = true;
      let result = null;
      // 执行编辑或修改
      if (this.isUpdate) {
        result = DeviceSprayFanlinkcameraConfigTemplateApi.edit(this.form);
      } else {
        result = DeviceSprayFanlinkcameraConfigTemplateApi.add(this.form);
      }
      result.then(res => {
          // 移除加载框
          this.loading = false;
          // 提示添加成功
          message.success(res.message);
          // 如果是新增，则form表单置空
          if (!this.isUpdate) {
            this.form = {};
          }
          // 关闭弹框，通过控制visible的值，传递给父组件
          this.updateVisible(false);
          // 触发父组件done事件
          this.$emit('done');
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>
<style scoped>
/** 用户卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-user-card h4 {
  margin-bottom: 6px;
}
.regionclass /deep/ .ant-col-md-11 {
  max-width : 30% !important;
}
.regionclass /deep/ .ant-col-md-13 {
  max-width: 70% !important;
}
</style>
